<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }" class="bread">主页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Detection' }" class="bread">属性感知</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="button-container">
    <el-button type="primary" class="custom-button"
      @click="methods.menuItemClick('DetectionMinor')">DNS系统部署架构感知功能测试</el-button>
    <el-button type="success" class="custom-button"
      @click="methods.menuItemClick('DetectionMajor')">多层次服务器指纹感知功能测试</el-button>
    <el-button type="warning" class="custom-button"
      @click="methods.menuItemClick('DetectionFour')">DNS安全防护措施感知功能测试</el-button>
    <el-button type="danger" class="custom-button"
      @click="methods.menuItemClick('DetectionMiddle')">DNS协议扩展感知功能测试</el-button>
    <el-button type="info" class="custom-button"
      @click="methods.menuItemClick('DetectionMap')">DNS系统服务范围感知功能测试</el-button>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
const router = useRouter();
  
const methods = {
      menuItemClick: (name: string) => {
          router.push({
              name: name
          });
      }
};
</script>

<style scoped>
.button-container {
  margin-top: 80px; /* 增加按钮与上方的距离 */
  text-align: center; /* 使按钮居中对齐 */
}

.custom-button {
  size: large; /* 这里是伪代码，el-button 不支持直接在 CSS 中设置 size */
  margin-right: 60px; /* 增加按钮之间的间距 */
  margin-top: 30px;
}

/* 如果需要更改按钮的大小，可以使用以下方法 */
.custom-button {
  padding: 42px 90px; /* 根据需要调整按钮的内边距 */
}


.bread {
    font-size: 34px;
}
</style>